<template>
	<view class="my-events">
		<!-- 活动列表 -->
		<view class="events-list" v-for="v in allData" key="v.id" @click="goDetails(v.id)">
			<view class="el-left">
				<img style="width: 140rpx;height: 140rpx;" :src="v.photo" alt="">
			</view>
			<view class="el-right">
				<view class="el-one">
					<text style="font-size: 28rpx;">{{v.title}}</text>
				</view>
				<view class="el-two">
					<view>
						<text :class="v.activityStatus==0?'activeTextB':(v.activityStatus==1?'activeTextJ':'activeTextY')">活动{{v.activityStatus==0?"报名中":(v.activityStatus==1?"进行中":"已结束")}}</text>
					</view>
					<view>
						<text :class="v.activityStatus==0?'remaining':(v.activityStatus==1?'remainingNo':'remainingNo')">剩余<text style="color: red;">{{v.quota}}</text>个名额</text>
					</view>
				</view>
			</view>
			<view :class="v.activityStatus==0?'tip':(v.activityStatus==1?'tip2':'tip1')">
				<text>{{v.activityStatus==0?"报名中":(v.activityStatus==1?"进行中":"已结束")}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import http from "../../utils/http.js"
	import {ref,onMounted} from "vue"
	
	// 定义一个放数据的数组
	let allData=ref([]);
	// 定义页数条数总条数
	let page=ref(1);
	let limit=ref(10);
	// 渲染数据的接口
	const getData = () => {
	  http({
	    url: "/seeMessageList",
	    data: {
	      page: page.value,
	      limit: limit.value,
		  wechatName:'小瓶盖'
	    },
	  }).then((res) => {
	    console.log(res.data);
	    if (res.code == 0) {
			console.log(1);
			allData.value = res.data.list;
	    }
		console.log(allData);
	  });
	};
	// 跳转
	const goDetails=(id)=>{
		uni.navigateTo({
			url: `/pages/eventsDetails/eventsDetails?id=${id}`
		});
	}
	
	// 挂载后
	onMounted(()=>{
		getData()
	})
</script>

<style lang="less" scoped>
	.my-events {
		padding: 50rpx 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	// 活动列表
	.events-list {
		width: 666rpx;
		height: 188rpx;
		box-shadow: 0 0 5px 2px #f1f1f1;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 30rpx;
		
		.el-left {
			width: 188rpx;
			height: 188rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.el-right {
			// padding-left: 30rpx;
			height: 108rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			
			.el-two {
				display: flex;
				width: 478rpx - 30rpx;
				padding-right: 30rpx;
				justify-content: space-between;
			}
		}
	
		.tip {
			width: 124rpx;
			height: 40rpx;
			background-color: #efb336;
			color: white;
			font-weight: bold;
			text-align: center;
			font-size: 27rpx;
			border-top-right-radius: 10rpx;
			vertical-align: middle;
			position: absolute;
			top:0 ;
			right: 0;
		}
		.tip1 {
			width: 124rpx;
			height: 40rpx;
			background-color: #999ea3;
			color: white;
			font-weight: bold;
			text-align: center;
			font-size: 27rpx;
			border-top-right-radius: 10rpx;
			vertical-align: middle;
			position: absolute;
			top:0 ;
			right: 0;
		}
		.tip2 {
			width: 124rpx;
			height: 40rpx;
			background-color: #5b80ff;
			color: white;
			font-weight: bold;
			text-align: center;
			font-size: 27rpx;
			border-top-right-radius: 10rpx;
			vertical-align: middle;
			position: absolute;
			top:0 ;
			right: 0;
		}
		.activeTextB {
			color: red;
			font-size: 27rpx;
			font-weight: bold;
		}
		.activeTextJ {
			color: #5b80ff;
			font-size: 27rpx;
			font-weight: bold;
		}
		.activeTextY {
			color: #999ea3;
			font-size: 27rpx;
			font-weight: bold;
		}
		// 展示剩余
		.remaining {
			font-weight: bold;
			color: #d5d6d4;
			font-size: 27rpx;
		}
		// 不展示剩余
		.remainingNo {
			display: none;
			font-weight: bold;
			color: #d5d6d4;
			font-size: 27rpx;
		}
	}
</style>
